<template>
  <div id="app">
      <a-layout>
          <a-layout-header style="background: #fff; border-bottom: 1px solid #ccc; width: 100%">
              <div class="_fc-t-header">
                  <!-- <img class="_fc-t-logo" src="http://form-create.com/logo.png">-->
                
                  <a-button @click="backToPreviousPage">返回</a-button>
                    <div class="_fc-t-name" >{{headTitle}}</div> 
                  <div class="_fc-t-menu">
                    <a-button type="primary" @click="saveJson"> 保存</a-button>
                      <a-button  @click="setJson"> 导入JSON</a-button>
                      <a-button  @click="setOption"> 导入Options</a-button>
                      <a-button  type="primary" @click="showJson">生成JSON</a-button>
                      <a-button  type="success" @click="showOption">生成Options</a-button>
                      <a-button  type="danger" @click="showTemplate">生成组件</a-button>
                  </div>
              </div>
          </a-layout-header>
          <a-layout has-sider>
              <fc-designer ref="designer"/>
          </a-layout>
      </a-layout>
     

      <a-modal :title="title[type]" :zIndex="100000" v-model:visible="state" class="_fc-t-dialog">
          <div ref="editor" v-if="state"></div>
          <span style="color: red;" v-if="err">输入内容格式有误!</span>
          <template #footer v-if="type > 2">
              <span class="dialog-footer">
                  <a-button @click="state = false" size="small">取 消</a-button>
                  <a-button type="primary" @click="onOk" size="small">确 定</a-button>
              </span>
          </template>
      </a-modal>
  </div>
</template>

<script>
import jsonlint from 'jsonlint-mod';
import 'codemirror/lib/codemirror.css';
import 'codemirror/addon/lint/lint.css';
import CodeMirror from 'codemirror/lib/codemirror';
import 'codemirror/addon/lint/lint';
import 'codemirror/addon/lint/json-lint';
import 'codemirror/mode/javascript/javascript';
import 'codemirror/mode/vue/vue';
import 'codemirror/mode/xml/xml';
import 'codemirror/mode/css/css';
import 'codemirror/addon/mode/overlay';
import 'codemirror/addon/mode/simple';
import 'codemirror/addon/selection/selection-pointer';
import 'codemirror/mode/handlebars/handlebars';
import 'codemirror/mode/htmlmixed/htmlmixed';
import 'codemirror/mode/pug/pug';
import {queryByIdUrl,saveOrUpdate} from '../DesignFrom.api';
import is from '@form-create/utils/lib/type';
import formCreate from '@form-create/ant-design-vue';


const TITLE = ['生成规则', '表单规则', '生成组件', '设置生成规则', '设置表单规则'];

export default {
  name: 'app',
  data() {
      return {
          state: false,
          value: null,
          title: TITLE,
          editor: null,
          err: false,
          type: -1,
          headTitle:'',
          fromId:'',
      };
  },
  watch: {
      state(n) {
          if (!n) {
              this.value = null;
              this.err = false;
          }
      },
      value() {
          this.load();
      }
  },
  mounted() {
    // 获取名字参数的值
     this.fromId = this.$route.query.fromId;
    this.reloadForm();
  },
  methods: {
    //初始化表单
    reloadForm(){
      let params = {id: this.fromId};
      queryByIdUrl(params).then(res=>{
        // console.log("res",res);
        this.$refs.designer.setRule(formCreate.parseJson(res.designFromJson)); 
        this.headTitle=res.designFromName+"-表单设计";
      })
    },
    async saveJson(){
      if (this.err) return;
          this.value = this.$refs.designer.getRule();
          let val = JSON.stringify(this.value);
          let param={
             id:this.fromId,
             designFromJson: val
          }
          // console.log("param",param);
          // console.log("JSON.parse(val);",JSON.parse(val));
          await saveOrUpdate(param, true);
          this.reloadForm();
      },
      load() {
          let val;
          if (this.type === 2) {
              val = this.value;
          } else if (this.type === 0) {
              val = formCreate.toJson(this.value, 2);
          } else {
              val = JSON.stringify(this.value, null, 2);
        }
              this.$nextTick(() => {
              this.editor = CodeMirror(this.$refs.editor, {
                  lineNumbers: true,
                  mode: this.type === 2 ? {name: 'vue'} : 'application/json',
                  gutters: ['CodeMirror-lint-markers'],
                  // lint: true,
                  line: true,
                  tabSize: 2,
                  lineWrapping: true,
                  value: val || ''
              });
          });
      },
      onValidationError(e) {
          this.err = e.length !== 0;
      },
      showJson() {
          this.state = true;
          this.type = 0;
          this.value = this.$refs.designer.getRule();
      },
      showOption() {
          this.state = true;
          this.type = 1;
          this.value = this.$refs.designer.getOption();
      },
      showTemplate() {
          this.state = true;
          this.type = 2;
          this.value = this.makeTemplate();
      },
      setJson() {
          this.state = true;
          this.type = 3;
          this.value = [];
      },
      setOption() {
          this.state = true;
          this.type = 4;
          this.value = {form: {}};
      },
      onOk() {
          if (this.err) return;
          const json = this.editor.getValue();
          let val = JSON.parse(json);
          if (this.type === 3) {
              if (!Array.isArray(val)) {
                  this.err = true;
                  return;
              }
              this.$refs.designer.setRule(formCreate.parseJson(json));
          } else {
              if (!is.Object(val) || !val.form) {
                  this.err = true;
                  return;
              }
              this.$refs.designer.setOption(val);
          }
          this.state = false;
      },
      backToPreviousPage() {
      this.$router.go(-1); // 返回上一页
    },
      makeTemplate() {
          const rule = this.$refs.designer.getRule();
          const opt = this.$refs.designer.getOption();
          return `<template>
<form-create
  v-model="fapi"
  :rule="rule"
  :option="option"
  @submit="onSubmit"
></form-create>
</template>

<script>
import formCreate from "@form-create/ant-design-vue";

export default {
data () {
  return {
      fapi: null,
      rule: formCreate.parseJson('${formCreate.toJson(rule).replaceAll('\\', '\\\\')}'),
      option: formCreate.parseJson('${JSON.stringify(opt)}')
  }
},
methods: {
  onSubmit (formData) {
    //todo 提交表单
  }
}
}
<\/script>`;
      }
  },
  beforeCreate() {
      window.jsonlint = jsonlint;
  }
};

</script>

<style>
._fc-t-header {
  height: 60px;
  margin: 0 20px;
  position: relative;
  display: flex;
  align-items: center;
  cursor: default;
}

._fc-t-logo {
  height: 26px;
}

._fc-t-name {
  display: inline-block;
  color: rgba(0, 0, 0, 0.8);
  font-size: 20px;
  font-weight: 600;
  margin-left: 5px;
}

._fc-t-menu {
  position: absolute;
  right: 0;
}

._fc-t-menu i {
  font-size: 12px;
}
._fc-t-menu button{
  margin-right: 5px;
}

body {
  min-height: 100vh;
  padding: 0;
  margin: 0;
  display: flex !important;
  flex-direction: column !important;
}

#app {
  display: flex;
  flex-direction: column;
  flex: 1;
}

._fc-copyright {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0 20px;
  font-size: 16px;
  border-top: 1px solid #ECECEC;
  background-color: #fff;
  cursor: pointer;
}

._fc-t-dialog .CodeMirror {
  height: 450px;
}

._fc-t-dialog .CodeMirror-line {
  line-height: 16px !important;
  font-size: 13px !important;
}

.CodeMirror-lint-tooltip {
  z-index: 2021 !important;
}

._fc-t-dialog .el-dialog__body {
  padding: 0px 20px;
}

._fc-b-item {
  display: flex;
}

</style>
